<template>
  <div class="article-list" ref="gd" @scroll="gundong">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
      ></van-pull-refresh> -->
      <van-cell
        @click="$router.push('/article/' + item.art_id)"
        v-for="item in list"
        :key="item.art_id"
        :title="item.title"
      >
        <!-- list 下面的图片与文字 建议再练一遍 -->
        <template #label>
          <van-grid
            v-if="item.cover.type !== 0"
            :border="false"
            :column-num="item.cover.type"
          >
            <van-grid-item
              v-for="(img, index) in item.cover.images"
              :key="index"
            >
              <van-image
                lazy-load
                :src="img"
                :class="{
                  ongImage: item.cover.type === 1,
                  threeImage: item.cover.type === 3
                }"
              />
            </van-grid-item>
          </van-grid>
          <div class="meta">
            <span>作者：{{ item.aut_name }}</span>
            <span>评论数：{{ item.comm_count }}</span>
            <span>{{ item.pubdate | now }}</span>
            <van-icon
              name="cross"
              if="$store.state.user.token.token"
              class="clo"
              @click.stop="showPopup(item.art_id)"
            ></van-icon>
          </div>
        </template>
      </van-cell>
    </van-list>
    <van-popup v-model="show">
      <van-cell-group v-if="istop">
        <van-cell @click.stop="del">不感兴趣</van-cell>
        <van-cell is-link @click.stop="istop = false">反馈垃圾内容</van-cell>
      </van-cell-group>
      <van-cell-group v-else>
        <van-cell icon="arrow-left" @click.stop="istop = true">返回</van-cell>
        <van-cell
          v-for="item in reports"
          :key="item.value"
          @click="repotsFn(item.value)"
        >
          {{ item.label }}
        </van-cell>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
//
import { getaticle, reportArticle } from '@/api/article'
import reports from '@/api/contantss/report'
import { mapState, mapActions } from 'vuex'
export default {
  props: ['id'],
  data() {
    return {
      reports,
      istop: true,
      delid: null,
      show: false,
      list: [],
      loading: false,
      finished: false,
      timeStamp: Date.now(),
      scroll: ''
    }
  },
  async created() {
    const res = await getaticle(this.id, Date.now())
    console.log(res.data)
    console.log(this.id)
    this.actions_allchannerlist()
  },

  methods: {
    gundong() {
      // console.log(123)
      // console.log(this.$refs.gd.scrollTop)
      this.scroll = this.$refs.gd.scrollTop
    },
    ...mapActions('channel', ['actions_allchannerlist']),
    del() {
      this.list = this.list.filter((item) => item.art_id !== this.delid)
      this.$toast('删除成功')
      this.show = false
    },
    showPopup(id) {
      // console.log(id)
      this.delid = id
      this.show = true
    },
    async onLoad() {
      if (this.timeStamp === null) {
        this.loading = true
        return (this.finished = true)
      }
      const res = await getaticle(this.id, this.timeStamp)
      this.loading = false
      this.timeStamp = res.data.pre_timestamp
      this.list = [...this.list, ...res.data.results]
    },
    async repotsFn(repfn) {
      const res = await reportArticle(this.delid, repfn)
      console.log(res)
      this.$toast('举报成功')
      this.istop = true
      this.show = false
    }
  },
  computed: {
    ...mapState([])
  },
  activated() {
    this.$refs.scrollTop = this.scrollTop
  }
}
</script>

<style lang="less" scoped>
.article-list {
  height: 100%;
  overflow-y: scroll;
}
.clo {
  float: right;
}
</style>
